<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Radio buttons styled</title>
    <style>
      input[type="radio"] {
        appearance: none;
      }

      input[type="radio"] {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px solid gray;
        /* Adjusts the position of the checkboxes on the text baseline */
        vertical-align: -2px;
        outline: none;
      }

      input[type="radio"]::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background-color: red;
        font-size: 1.2em;
        transform: translate(3px, 3px) scale(0);
        transform-origin: center;
        transition: all 0.3s ease-in;
      }

      input[type="radio"]:checked::before {
        transform: translate(3px, 3px) scale(1);
        transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
      }
    </style>
  </head>

<body>
  <form>
    <fieldset>
      <legend>Choose your favourite fruit</legend>

      <p>
        <label>
          <input type="radio" name="fruit" value="cherry">
          Cherry
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="banana">
          Banana
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="strawberry">
          Strawberry
        </label>
      </p>
    </fieldset>
  </form>
</body>

</html>
